<script lang="ts" setup>
import { ref, onMounted, reactive, onBeforeMount } from "vue";
import page from "@/assets/images/home/page.png";
import code from "@/assets/images/home/code.png";
import dataset from "@/assets/images/home/dataset.png";
import license from "@/assets/images/home/license.png";
//  按需引入 echarts
import * as echarts from "echarts";
import baseService from "@/service/baseService";
import { requiredNumber } from "element-plus/es/components/table-v2/src/common";
const main = ref(); // 使用ref创建虚拟DOM引用，使用时用main.value
const sex = ref();
const qx = ref();
const card1data = reactive({
  getDataListURL1: "/poap/poappage/page",
  getDataListURL2: "/poap/poapsourcecode/page",
  getDataListURL3: "/poap/poapdataset/page",
  getDataListURL4: "/poap/poapopensourcelicense/page",
  getDataListIsPage: true,
  deleteIsBatch: true,
  deleteIsBatchKey: "id",
  datetimerange: null,
  drawerPage: false,
  dataForm: {
    name: "",
    status: "",
    auditorId: "",
    codeStatus: "",
    pageStatus: "",
    datasetStatus: "",
    userId: "",
    delFlag: 0
  }
});
const card2data = reactive({
  getDataListURL: "/sys/user/page",
  getDataListIsPage: true,
  deleteIsBatch: true,
  dataForm: {
    username: "",
    deptId: "",
    postId: "",
    gender: ""
  },
  genderNum: {
    man: 18,
    female: 11
  }
});
const card3data = reactive({
  getProjectDataListURL: "/poap/poappage/page",
  getDataListIsPage: true,
  deleteIsBatch: true,
  dataForm: {
    name: "",
    status: 0,
    auditorId: "",
    codeStatus: "",
    pageStatus: "",
    datasetStatus: "",
    userId: "",
    delFlag: 0
  },
  projectNum: [] as any
});
const card4data = reactive({
  getUserDataListURL: "/sys/user/page",
  getDeptDataListURL: "/sys/dept/list",
  getPostDataListURL: "/sys/post/page",
  getRoleDataListURL: "/sys/role/page",
  getDataListIsPage: true,
  deleteIsBatch: true,
  dataForm: {
    username: "",
    deptId: "",
    postId: "",
    gender: ""
  },
  card3Num: [
    {
      name: "用户数量",
      type: "line",
      stack: "Total",
      data: [34, 56, 61, 58, 72, 79, 86]
    },
    {
      name: "部门数量",
      type: "line",
      stack: "Total",
      data: [4, 8, 7, 13, 15, 19, 22]
    },
    {
      name: "岗位数量",
      type: "line",
      stack: "Total",
      data: [13, 23, 46, 48, 59, 67, 79]
    },
    {
      name: "角色数量",
      type: "line",
      stack: "Total",
      data: [3, 15, 24, 38, 46, 57, 69]
    }
  ]
});

const state = reactive({ card1data, card2data, card3data, card4data });
const countData = [
  {
    name: "论文数量",
    value: 2,
    imgSrc: page
  },
  {
    name: "源代码数量",
    value: 3,
    imgSrc: code
  },
  {
    name: "数据集数量",
    value: 3,
    imgSrc: dataset
  },
  {
    name: "开源许可证数量",
    value: 2,
    imgSrc: license
  }
];

onBeforeMount(() => {
  // getCard1Data()
});
onMounted(() => {
  init();
});
function init() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(main.value);
  var sexChart = echarts.init(sex.value);
  var qxChart = echarts.init(qx.value);
  // 指定图表的配置项和数据
  var option = {
    title: {
      text: "各状态项目数量"
    },
    tooltip: {},
    legend: {
      data: ["个数"]
    },
    xAxis: {
      data: ["草案", "已提交", "重新修订", "已通过"]
    },
    yAxis: {},
    series: [
      {
        name: "个数",
        type: "bar",
        data: [5, 9, 3, 7]
        // data: getOption()
      }
    ]
  };
  var option1 = {
    title: {
      text: "用户比例",
      // subtext: 'Fake Data',
      left: "center"
    },
    tooltip: {
      trigger: "item"
    },
    legend: {
      top: 30,
      orient: "vertical",
      left: "right"
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "50%",
        top: 20,
        data: [
          { value: 12, name: "男" },
          { value: 18, name: "女" }
        ],
        // data: getOption1(),
        emphasis: {
          itemStyle: {
            shadowBlur: 25,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      }
    ]
  };
  var option2 = {
    title: {
      // text:
    },
    tooltip: {
      trigger: "axis"
    },
    legend: {
      data: ["用户数量", "部门数量", "岗位数量", "角色数量"]
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["2000", "2005", "2010", "2015", "2020", "2022", "2023"]
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        name: "用户数量",
        type: "line",
        stack: "Total",
        data: [34, 56, 61, 58, 72, 79, 86]
      },
      {
        name: "部门数量",
        type: "line",
        stack: "Total",
        data: [4, 8, 7, 13, 15, 19, 22]
      },
      {
        name: "岗位数量",
        type: "line",
        stack: "Total",
        data: [13, 23, 46, 48, 59, 67, 79]
      },
      {
        name: "角色数量",
        type: "line",
        stack: "Total",
        data: [3, 15, 24, 38, 46, 57, 69]
      }
    ]
    // series:getOption2()
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  sexChart.setOption(option1);
  qxChart.setOption(option2);
}
const getCard1Data = function () {
  baseService
    .get(state.card1data.getDataListURL1, {
      order: "",
      orderField: "",
      page: 1,
      limit: 10,
      ...state.card1data.dataForm
    })
    .then((res) => {
      console.log(res);
      countData[0].value = res.data.total;
    });
  baseService
    .get(state.card1data.getDataListURL2, {
      order: "",
      orderField: "",
      page: 1,
      limit: 10,
      ...state.card1data.dataForm
    })
    .then((res) => {
      console.log(res);
      countData[1].value = res.data.total;
    });
  baseService
    .get(state.card1data.getDataListURL3, {
      order: "",
      orderField: "",
      page: 1,
      limit: 10,
      ...state.card1data.dataForm
    })
    .then((res) => {
      console.log(res);
      countData[2].value = res.data.total;
    });
  baseService
    .get(state.card1data.getDataListURL4, {
      order: "",
      orderField: "",
      page: 1,
      limit: 10,
      ...state.card1data.dataForm
    })
    .then((res) => {
      console.log(res);
      countData[3].value = res.data.total;
      console.log(countData);
    });
};
const getOption = function () {
  state.card3data.dataForm.status = 0;
  baseService
    .get(state.card3data.getProjectDataListURL, {
      order: "",
      orderField: "",
      page: 1,
      limit: 10,
      ...state.card3data.dataForm
    })
    .then((res) => {
      console.log(res);
      if (res.code !== 0) return false;
      state.card3data.projectNum[0] = res.data.total;
    });
  state.card3data.dataForm.status = 1;
  baseService
    .get(state.card3data.getProjectDataListURL, {
      order: "",
      orderField: "",
      page: 1,
      limit: 10,
      ...state.card3data.dataForm
    })
    .then((res) => {
      console.log(res);
      if (res.code !== 0) return false;
      state.card3data.projectNum[1] = res.data.total;
    });
  state.card3data.dataForm.status = 2;
  baseService
    .get(state.card3data.getProjectDataListURL, {
      order: "",
      orderField: "",
      page: 1,
      limit: 10,
      ...state.card3data.dataForm
    })
    .then((res) => {
      console.log(res);
      if (res.code !== 0) return false;
      state.card3data.projectNum[2] = res.data.total;
    });
  state.card3data.dataForm.status = 3;
  baseService
    .get(state.card3data.getProjectDataListURL, {
      order: "",
      orderField: "",
      page: 1,
      limit: 10,
      ...state.card3data.dataForm
    })
    .then((res) => {
      console.log(res);
      if (res.code !== 0) return false;
      state.card3data.projectNum[3] = res.data.total;
    });
  console.log(state.card3data.projectNum);
  return state.card3data.projectNum;
};
const getOption1 = function () {
  baseService
    .get(state.card2data.getDataListURL, {
      order: "",
      orderField: "",
      page: 1,
      limit: 10,
      ...state.card2data.dataForm
    })
    .then((res) => {
      console.log(res);
      if (res.code !== 0) return false;
      let option1data = res.data.list;
      for (let i = 0; i < option1data; i++) {
        if (option1data[i].gender === 0) state.card2data.genderNum.man++;
        else if (option1data[i].gender === 1) state.card2data.genderNum.female++;
      }
    });
  console.log(state.card2data.genderNum);
  const data = [
    { value: state.card2data.genderNum.man, name: `男` },
    { value: state.card2data.genderNum.female, name: "女" }
  ];
  console.log(data);
  return data;
};
const getOption2 = function () {
  baseService
    .get(state.card4data.getUserDataListURL, {
      order: "",
      orderField: "",
      page: 1,
      limit: 10,
      ...state.card4data.dataForm
    })
    .then((res) => {
      console.log(res);
      if (res.code !== 0) return false;
      state.card4data.card3Num[0].data[6] = res.data.total;
    });
  baseService
    .get(state.card4data.getDeptDataListURL, {
      order: "",
      orderField: "",
      page: 1,
      limit: 10,
      ...state.card4data.dataForm
    })
    .then((res) => {
      console.log(res);
      if (res.code !== 0) return false;
      state.card4data.card3Num[1].data[6] = res.data.total;
    });
  baseService
    .get(state.card4data.getPostDataListURL, {
      order: "",
      orderField: "",
      page: 1,
      limit: 10,
      ...state.card4data.dataForm
    })
    .then((res) => {
      console.log(res);
      if (res.code !== 0) return false;
      state.card4data.card3Num[2].data[6] = res.data.total;
    });
  baseService
    .get(state.card4data.getRoleDataListURL, {
      order: "",
      orderField: "",
      page: 1,
      limit: 10,
      ...state.card4data.dataForm
    })
    .then((res) => {
      console.log(res);
      if (res.code !== 0) return false;
      state.card4data.card3Num[3].data[6] = res.data.total;
    });
  return state.card4data.card3Num;
};
</script>
<template>
  <div class="card">
    <div class="card-t">
      <el-card class="card2" :body-style="{ display: 'flex', justifyContent: 'center', alignItems: 'center' }">
        <div ref="sex" class="sex"></div>
      </el-card>
      <el-card class="card3" :body-style="{ display: 'flex', justifyContent: 'center', alignItems: 'center' }">
        <div ref="main" class="main"></div>
      </el-card>
    </div>
    <div class="card-b">
      <el-card class="card1">
        <div class="num_box">
          <el-card class="num" :body-style="{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', padding: 0, width: '100%' }" v-for="item in countData" :key="item.name">
            <div class="text">{{ item.name }}</div>
            <div class="top">
              <div class="detail">
                <p class="price">{{ item.value }}</p>
              </div>
              <div class="img">
                <img :src="item.imgSrc" alt="" />
              </div>
            </div>
          </el-card>
        </div>
      </el-card>
      <el-card class="card4" :body-style="{ display: 'flex', justifyContent: 'center', alignItems: 'center' }">
        <div ref="qx" class="qx"></div>
      </el-card>
    </div>
  </div>
</template>

<style lang="less" scoped>
.card {
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: center;

  .card-t {
    width: 100%;
    display: flex;
    flex: 1;

    .card2 {
      flex: 2;
      height: 100%;
      margin-right: 4%;
      margin-bottom: 1%;

      .sex {
        width: 22vw;
        height: 32vh;
      }
    }

    .card3 {
      flex: 3;
      height: 100%;
      margin-bottom: 1%;

      .main {
        width: 33vw;
        height: 32vh;
      }
    }
  }

  .card-b {
    display: flex;
    flex: 1;
    width: 100%;

    .card1 {
      flex: 2;
      height: 43vh;
      margin-right: 4%;

      .num_box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;

        .num:nth-child(2n + 1) {
          margin-right: 6%;
        }

        .num:nth-child(1) {
          margin-top: 4%;
          margin-bottom: 4%;
        }

        .num {
          width: 45%;
          transition: transform 0.5s, box-shadow 0.5s;
          box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        }
        .top {
          display: flex;
          justify-content: center;
          width: 100%;

          .img {
            width: 50%;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
              cursor: pointer;
              width: 35%;
              caret-color: rgba(0, 0, 0, 0);
            }
          }

          .detail {
            width: 50%;
            display: flex;
            justify-content: center;
            align-items: center;

            .price {
              font-size: 27px;
              caret-color: rgba(0, 0, 0, 0);
            }
          }
        }

        .text {
          margin-top: 10px;
          font-size: 1em;
          caret-color: rgba(0, 0, 0, 0);
        }
      }

      //.el-card {
      //  width: 32%;
      //  margin-bottom: 20px;
      //}
    }
    .num:hover {
      transform: translateY(-8px);
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
    }
  }

  .card4 {
    flex: 3;
    height: 100%;

    .qx {
      width: 35vw;
      height: 37vh;
    }
  }
}
</style>
